<template>
  <view class="page flex padding-lg flex-wrap justify-between">
    <view class="content">
      <!-- 左侧logo -->
      <view class="logo">
        <text>GreenBook</text>
      </view>
      <view class="tip">
        <text>创作自己的绿皮书吧！</text>
      </view>

      <!-- 右侧返回按钮 -->
      <button 
        class="cu-btn" 
        style="
          background-color: rgba(220, 226, 224, 0.5);
          width: 110rpx; 
          height: 110rpx; 
          border-radius: 40rpx; 
          position: absolute;
          top: 40rpx;
          right: 40rpx;
        "
        @click="back"
      >
        <uni-icons 
          fontFamily="iconfont" 
          :size="50"
        >
          {{"\ueb79"}}
        </uni-icons>
      </button>

      <!-- 进度条-->
      <view class="step-bar">
        <view 
          v-for="(step, index) in steps" 
          :key="index" 
          class="step-item"
        >
          <view 
            class="step-dot" 
            :class="{ active: currentStep >= index + 1 }"
          ></view>
          <view 
            class="step-line" 
            v-if="index < steps.length - 1"
            :class="{ active: currentStep > index + 1 }"
          />
        </view>
      </view>

      <!-- 1.main-1 -->
      <view class="main-1" v-if="currentStep === 1">
        <image src="/src/static/sunset.jpg" mode="widthFix" ></image>
        <text>让我们了解一些旅游情况，帮助你快速配置book</text>
      </view>

      <!-- 2.main-2-->
      <view class="main-2" v-if="currentStep === 2">
        <text>首先，为book起一个标题吧！</text>
        <view class="input-container">
          <input 
            type="text" 
            v-model="bookTitle"
            placeholder="点击输入book标题"/>
        </view>
      </view>

      <!-- 3.main-3 -->
      <view class="main-3" v-if="currentStep === 3">
        <text class="title">这场旅行计划在什么时候呢？</text>
        <view 
          class="dateTime-container"
          @click="selectTimeStatus(0)"
          :class="{active: selectedTimeIndex === 0}"
        >
          <view class="icon-circle" :class="{active: selectedTimeIndex === 0}" />
          <text>旅行没开始</text>
        </view>
        <view 
          class="dateTime-container"
          @click="selectTimeStatus(1)"
          :class="{active: selectedTimeIndex === 1}"
        >
          <view class="icon-circle" :class="{active: selectedTimeIndex === 1}" />
          <text>之前的旅行</text>
        </view>
        <view 
          class="dateTime-container"
          @click="selectTimeStatus(2)" 
          :class="{active: selectedTimeIndex === 2}"
        >
          <view class="icon-circle" :class="{active: selectedTimeIndex === 2}" />
          <text>已经在路上</text>
        </view>
      </view>

      <!-- 4.main-4-->
      <view class="main-4" v-if="currentStep === 4">
        <text>最后，行程大概有几天呢？</text>
        <text style="color: grey; font-size: 15rpx;margin-top: 5rpx;">后面可以在时间线调整</text>
        <!-- picker-view 容器 -->
        <view class="picker-view-container">
          <picker-view
            :value="selectedIndex"
            @change="onDaysChange"
            indicator-style="height:80rpx;opacity:0"
            style="width: 100%; height: 200rpx;"
          >
            <picker-view-column>
              <view 
                class="picker-item" 
                v-for="(day,index) in days"
                :key="index"
              >
                {{day}}日
              </view>
            </picker-view-column>
          </picker-view>
		  <view class="day-indicator"></view>
        </view>
      </view>

    <!-- 5.main-5-->
	<view class="main-5" v-if="currentStep === 5">
		<view class="tab-text">
			<text class="title">马上就完成啦!</text>
			<text class="subtitle">book已经准备就绪，再确认一下配置，book即将创建成功！之后可以在详情页中随时修改</text>
		</view>
		
		<view class="form-date">
			<view class="form-item" @click="showDatePicker = !showDatePicker" style="margin-top: 10rpx;">
				<text class="label">出发日期</text>
				<view class="val-container">
					<text class="val1" @click="showDateMask">{{ selectedDate || '点击选择' }}</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="form-item" style="margin-bottom: 10rpx;">
				<text class="label">总天数</text>
				<view class="val-container">
					<text class="val2" @click="showDayMask">1天</text>
				</view>
			</view>
		</view>
		
		<view class="form-time">
			<text>行程时间：</text>
		</view>
		
		<view class="form-number">
			<text class="label">总人数</text>
			<view class="val-container">
				<text class="num" @click="showNumMask">未选择</text>
			</view>
		</view>
	</view>

      <!-- 下方按钮-->
      <view 
        class="button-below" 
        @click="onClick" 
        v-if="currentStep <= steps.length"
        :class="{ disabled: isNextDisabled }"
        :style="{ pointerEvents: isNextDisabled ? 'none' : 'auto' }"
      >
        <text>
          {{ currentStep === 1 ? '开始' : (currentStep === 5 ? '完成配置' : '继续') }}
        </text>
      </view>
    </view>
	


    
	
	<!-- 遮罩层 -->
	<view 
	  class="mask" 
	  v-if="showMask"
	  @click="onMaskClick"
	>
		<!-- 出发日期功能 -->
		<view class="picker-view-container" v-if="showDateContainer" @click.stop>
			
			<view class="sub-container">
			  <picker-view
			    :value="selectedIndex"
			    @change="onDaysChange"
			    indicator-style="height:80rpx;opacity:0"
			    style="width: 100%; height: 200rpx;"
			  >
			    <picker-view-column>
			      <view class="picker-item" v-for="(year, index) in years" :key="index">{{ year }}</view>
			    </picker-view-column>
			    <picker-view-column>
			      <view class="picker-item" v-for="(month, index) in months" :key="index">{{ month }}</view>
			    </picker-view-column>
			    <picker-view-column>
			      <view class="picker-item" v-for="(day, index) in daysColumn" :key="index">{{ day }}</view>
			    </picker-view-column>
			  </picker-view>
			  <view class="indicator"></view>
			</view>
			
			<view class="btn-container">
				<button class="confirm-btn" @click="confirmDate">完成</button>
			</view>
		</view>
		
		<!-- 总天数 -->
		<view class="picker-view-container" v-if="showDayContainer" @click.stop>
			
			<view class="sub-container">
			  <picker-view
			    :value="selectedIndex"
			    @change="onDaysChange"
			    indicator-style="height:80rpx;opacity:0"
			    style="width: 100%; height: 200rpx;"
			  >
			    
			    <picker-view-column>
			      <view class="picker-item" v-for="(day, index) in daysColumn" :key="index">{{ day }}</view>
			    </picker-view-column>
			  </picker-view>
			  <view class="indicator"></view>
			</view>
			
			<view class="btn-container">
				<button class="confirm-btn" @click="confirmDate">完成</button>
			</view>
		</view>
		
		<!-- 总人数 -->
		<view class="picker-view-container" v-if="showNumContainer" @click.stop>
			
			<view class="sub-container">
			  <picker-view
			    :value="selectedIndex"
			    @change="onDaysChange"
			    indicator-style="height:80rpx;opacity:0"
			    style="width: 100%; height: 200rpx;"
			  >
			    
			    <picker-view-column>
			      <view class="picker-item" v-for="(day, index) in daysColumn" :key="index">{{ day }}</view>
			    </picker-view-column>
			  </picker-view>
			  <view class="indicator"></view>
			</view>
			
			<view class="btn-container">
				<button class="confirm-btn" @click="confirmDate">完成</button>
			</view>
		</view>
		
		
		
		  
	</view>
	
  </view>
</template>

<script setup>
import { ref, computed, onMounted,watch } from 'vue';

// 进度条配置
const steps = [1, 2, 3, 4, 5];
const currentStep = ref(1); 

// form内容配置
const bookTitle = ref('')
const selectedTimeIndex = ref(-1) 

// 选择dateTime状态
const selectTimeStatus = (index) =>{
  selectedTimeIndex.value = index
}

// 天数选择相关
const days = ref([]);
const selectedIndex = ref([0]);
const selectedDay = ref(1);

// 页面加载生成1 - 30天数据，onMounted 钩子函数，组件挂载后执行
onMounted(()=>{
  for(let i = 1 ;i<=30;i++){
    days.value.push(i)
  }
})
// 天数选择变化
const onDaysChange = (e) => {
  const index = e.detail.value[0];
  selectedIndex.value = [index];
  selectedDay.value = days.value[index];

};

// 计算属性：判断下一步按钮是否禁用（覆盖所有需要验证的步骤）
const isNextDisabled = computed(() => {
  switch(currentStep.value) {
    case 2:
      return !bookTitle.value.trim();  // 第二步验证标题
    case 3:
      return selectedTimeIndex.value === -1;  // 第三步验证是否选择
    case 4:
      return !selectedDay.value;  // 第四步验证天数选择
    default:
      return false;  // 其他步骤无需验证
  }
});

// 点击下一步按钮
const onClick = () => {
  // 验证当前步骤是否可以继续
  if (isNextDisabled.value) return;

  // 确保不超过最大步骤数
  if (currentStep.value < steps.length) {
    currentStep.value++;
  }
  
  else if (currentStep.value === 5){
  	  uni.navigateTo({
  		  url:'/pages/green_books/index'
  	  })
  }
};

// 返回上一步
const back = () => {
  // 确保不小于最小步骤数
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};

// 完成流程
const finish = () => {
  // 这里可以添加表单提交逻辑
  const formData = {
    title: bookTitle.value,
    timeStatus: selectedTimeIndex.value,
    days: selectedDay.value
  };
  console.log('表单数据:', formData);
  uni.showToast({
    title: '配置完成！你的绿皮书已创建成功！',
    icon: 'none'
  });
};

//遮罩
const showDayContainer =ref(false)
const showNumContainer = ref(false)


//日期弹窗对应逻辑
const showDateContainer =ref(false)
const showDatePicker = ref(false); // 控制日期选择弹窗显示隐藏
const selectedDate = ref(''); // 存储最终选中的日期
const years = ref([]); // 年份数据
const months = ref([]); // 月份数据
const daysColumn = ref([]); // 日期数据
const pickerValue = ref([0, 0, 0]); // picker-view默认选中的索引，分别对应年、月、日

// 初始化年份、月份（可根据实际需求调整范围）
onMounted(() => {
  // 初始化年份，这里以近10年为例
  const nowYear = new Date().getFullYear();
  for (let i = nowYear - 5; i <= nowYear + 5; i++) {
    years.value.push(i);
  }
  // 初始化月份
  for (let i = 1; i <= 12; i++) {
    months.value.push(i < 10 ? `0${i}` : i);
  }
  // 初始化日期（默认按1月处理，后续滚动时动态更新）
  updateDays(0, 0);
});

// 监听年份或月份变化，更新日期
watch(
  () => [pickerValue.value[0], pickerValue.value[1]],
  ([yearIndex, monthIndex]) => {
    updateDays(yearIndex, monthIndex);
  }
);

// 根据年份和月份更新可选日期
function updateDays(yearIndex, monthIndex) {
  const year = years.value[yearIndex];
  const month = months.value[monthIndex];
  const daysCount = new Date(year, month, 0).getDate(); // 获取当月天数
  daysColumn.value = [];
  for (let i = 1; i <= daysCount; i++) {
    daysColumn.value.push(i < 10 ? `0${i}` : i);
  }
  // 重置日期选中索引，避免超出范围
  if (pickerValue.value[2] >= daysColumn.value.length) {
    pickerValue.value[2] = daysColumn.value.length - 1;
  }
}

// picker-view滚动事件
const onPickerChange = (e) => {
  pickerValue.value = e.detail.value;
};

// 确认选择日期
const  confirmDate = () => {
  const year = years.value[pickerValue.value[0]];
  const month = months.value[pickerValue.value[1]];
  const day = daysColumn.value[pickerValue.value[2]];
  selectedDate.value = `${year}年${month}月${day}日`;
  showDatePicker.value = false;
  showMask.value =false;
  showDateContainer.value =false;
  showDayContainer.value = false;
  showNumContainer.value =false;
  
};

const showMask =ref(false);
const onMaskClick = ()=>{
	showMask.value =false;
	showDateContainer.value =false
	showDayContainer.value = false
	showNumContainer.value =false
}
const showDateMask = ()=>{
	showDateContainer.value = !showDateContainer.value
	showMask.value = true
}
const showDayMask = () =>{
	showMask.value =true;
	showDayContainer.value = !showDayContainer.value
}
const showNumMask = () =>{
	showMask.value = true
	showNumContainer.value = !showNumContainer.value
}
</script>

<style>
.page{
  background-color: #F4FAF8;
  min-height: 100vh;
  padding-top: 80rpx;
}
.content{
  width: 100%;
  display: flex;
  align-content: center;
  flex-direction: column;
  padding: 20rpx;
  position: relative;
}

/* logo */
.logo {
	margin-top: 40rpx;
  font-size: 55rpx;
  font-weight: bold;
  color: #000; 
}

/* 左侧logo下的小题字 */
.tip {
  font-size: 20rpx;
  color: grey;
  margin-bottom: 40rpx;
}

/*进度条*/
.step-bar {
  padding: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  margin-bottom: 50rpx;
  width: 100%;
}
.step-item {
  display: flex;
  align-items: center;
}
.step-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #DCE2E0;
}

.step-dot.active {
  background-color: #2DD296;
}

.step-line {
  width: 110rpx;
  height: 5rpx;
  background-color: #DCE2E0;
  margin: 0 10rpx;
}

.step-line.active {
  background-color: #2DD296;
}

/* main-1 */
.main-1 {
  background-color: white;
  margin-bottom: 40rpx;
  width: 100%;
  height: 500rpx;
  border-radius: 30rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); 
  overflow: hidden;

  image {
    width: 100%;
    height: 400rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    object-fit: cover;
  }
  text {
    padding: 15rpx;
    font-weight: bold;
    font-size: 20rpx;
    color: black;
    display: block; 
  }
}


/*main-2*/
.main-2{
  width: 100%;
  height: 300rpx;

  text{
	  
    margin-left: 20rpx;
    font-weight: bold;
    font-size: 25rpx;
    color: black;
    display: block; 
  }
  .input-container{
    margin-top: 35rpx;
    display: flex;
    width: 100%;
    height: 200rpx;
    background-color: white;
    border-radius: 40rpx;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);  

    input {
      font-size: 30rpx;
      text-align: center;
    }
  }	
}

/* main-3*/
.main-3{
  width: 100%;
  height: 400rpx;

  .title{
    font-weight: bold;
    margin-left: 25rpx;
    display: block;
    margin-bottom: 30rpx;
    font-size: 30rpx;
  }

  .dateTime-container{
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-top: 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    transition: all 0.2s;

    .icon-circle{
      margin-left: 10rpx;
      width: 35rpx;
      height: 35rpx;
      border-radius: 50rpx;
      margin-right: 20rpx;
      border: 4rpx solid;
    }

    text{
      font-weight: bold;
      font-size: 25rpx;
      transition: color 0.2s;
    }
  }

  /* 选中状态样式 */
  .dateTime-container.active {
    background-color: rgba(244,250,248,0);
  }
  .dateTime-container.active .icon-circle {
    background-color:#2DD296;
    border: 4rpx solid #2DD296;
  }
  .dateTime-container.active text {
    color: #2DD296;
  }
}


/* main-4 */
.main-4 {
  width: 100%;
  height: 300rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 40rpx;
  
  text{
	  margin-left: 22rpx;
  }
  .picker-view-container {
  	margin-top: 35rpx;
  	width: 100%;
  	height: 200rpx;
  	overflow: hidden;
  	margin-top: 20rpx;
  	border-radius: 40rpx;
  	justify-content: center;
  	align-items: center;
  	background-color: #fff;
  	box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  	
  	.picker-view {
  		  width: 100%;
  		  height: 100%;
  		}
  }
}

.picker-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx; /*降低滑动速度 */
  font-size: 28rpx;
}

.day-indicator{
	position: absolute;
	top: 460rpx;
	left: 80rpx;
	border-radius: 30rpx;
	width: 520rpx;
	height: 80rpx;
	background-color: rgba(45, 210, 150, 0.3);
	border: 1rpx solid #2DD296;
	z-index: 20;
}
/*main-5*/
.main-5{
	width: 100%;
	.tab-text{
		display: flex;
		flex-direction: column;
		border-radius: 30rpx;
		background-color: white;
		padding: 20rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
		margin-bottom: 40rpx;
		
		.title{
			margin-bottom: 18rpx;
			font-weight: bold;
		}
		.subtitle{
			font-size: 20rpx;
			color: gray;
		}
	}
	
	.form-date{
		display: flex;
		flex-direction: column;
		border-radius: 30rpx;
		background-color: white;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
		
		.divider{
				width: 100%;
				height: 1rpx;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				background-color: #F5F5F5;
		}
			
		.form-item{
			width: 100%;
			display: flex;
			justify-content: space-between;
			
			
			.val-container{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 5rpx 10rpx 5rpx 10rpx;
				border-radius: 15rpx;
				background-color: #ECF2F0;
				
				text{
					font-size: 20rpx;
					font-weight: bold;
					color: #A7B2B0;
				}
				
				}
			.val-container.active{
				background-color: #D8F6EC;
				text{
					color: black;
				}
			}
			
			
		}	

		
	}
	
	.form-time{
		margin-top: 5rpx;
		margin-bottom: 17rpx;
		
		text{
			font-size: 21rpx;
			color: #A7B2B0;
			margin-left: 30rpx;
		}
	}
	
	.form-number{
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-radius: 20rpx;
		background-color: white;
		padding: 15rpx 30rpx 15rpx 30rpx;
		box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
		
		.val-container{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5rpx 10rpx 5rpx 10rpx;
			border-radius: 15rpx;
			background-color: #ECF2F0;
			
			text{
				font-size: 15rpx;
				font-weight: bold;
				color: #A7B2B0;
			}
			
			}
		.val-container.active{
			background-color: #D8F6EC;
			text{
				color: black;
			}
		}
		
	}
	
}


/* 下方按钮 */
.button-below {
  font-size: 28rpx;
  font-weight: bold; 
  color: #FFF; 
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80rpx;
  border: 1px solid #2DD296;
  border-radius: 30rpx;
  padding: 20rpx;
  background-color: #2DD296;
  box-shadow: 0 4rpx 12rpx 5rpx rgba(45,210,150,0.5);
  margin: 30rpx auto;
  transition: all 0.2s;
}

.button-below:active{
	transform: scale(0.98);
	opacity: 0.9;
}

.button-below.disabled {
	background-color: #b3e6d1;
	border-color: #b3e6d1;
	box-shadow: none;
}


.button-complete:active {
	transform: scale(0.98);
	opacity: 0.9;
}

/*遮罩层*/
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20; /* 确保在最上层 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
  
	.picker-view-container {
	  height: 400rpx;
	  width: 100%;
	  padding: 30rpx;
	  background-color: white;
	  border-radius: 40rpx;
	  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
	  background-color: #fff;
	  

		.sub-container{
			margin-top: 20rpx;
			width: 100%;
			height: 200rpx;
			overflow: hidden;
			border-radius: 40rpx;
			justify-content: center;
			align-items: center;
			background-color: #fff;


			.picker-view {
			  width: 100%;
			  height: 100%;
			}
		}
	}
  	
  .confirm-btn {
	  margin-top: 40rpx;
	  width: 300rpx;
	  background-color: #2dd296;
	  color: #fff;
	  padding: 10rpx 10rpx;
	  border-radius: 20rpx;
	  font-weight: bold;

	}
	
  .picker-item {
    display: flex;
	text-align: center;
    height: 80rpx; /*降低滑动速度 */
	line-height: 80rpx;
    font-size: 28rpx;
  }
  .indicator{
	  position: absolute;
	  top: 500rpx;
	  left: 90rpx;
	  border-radius: 30rpx;
	  width: 550rpx;
	  height: 80rpx;
	  background-color: rgba(45, 210, 150, 0.3);
	  border: 1rpx solid #2DD296;
	  z-index: 20;
  }
	
}






</style>